<template>
  <div class="coupondetail-container">
    <!-- 导航栏 -->
    <van-nav-bar class="nav-bar" title="优惠券详情" left-arrow @click-left="$router.back()"/>
    <div class="coupon-info">
      <div class="circle">
        <img src="imgs/coupon.png" alt=""/>
      </div>
      <div class="content">
        <span class="title">10.00元优惠券</span>
        <span class="condition">满100.00元可用</span>
        <van-button class="btn">立即领取</van-button>
        <span class="tip">有效期：2020-10-18 至 2020-10-23</span>
      </div>
      <div class="desc">
        <span>优惠券描述优惠券描述优惠券描述优惠券描述优惠券描述优惠券描述优惠券描述优惠券描述</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'couponDetail',
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
.coupondetail-container{
  height: 100vh;
  background: linear-gradient(180deg,#f0c785,#f6d69d);
  display: flex;
  justify-content: center;
  .coupon-info{
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .circle{
      height: 70px;
      width: 70px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        z-index: 2;
        width: 50px;
        height: 50px;
      }
    }
    .content{
      position: relative;
      top: -35px;
      height: 170px;
      width: 340px;
      background: #fff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;
      border-bottom: 1px solid #f0c785;
      .title{
        color: #333;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 15px;
      }
      .condition{
        color: #333;
        font-size: 14px;
        margin-bottom: 20px;
      }
      .tip{
        margin-top: 15px;
        color: #999;
        font-size: 13px;
      }
      .btn{
        padding: 20px;
        font-size: 14px;
      }
    }
    .desc{
      position: relative;
      top: -35px;
      width: 310px;
      background: #fff;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      padding: 15px 15px;
      padding-bottom: 20px;
      display: flex;
      span{
        color: #999;
        font-size: 14px;
        line-height: 22px;
      }
    }
  }
}
</style>
